<template>
    <div class="shoppingContain">
      <div class="shoppingBox">
        <h1>购物车</h1>
        <div class="shoppingTop">
          <span>商品</span>
          <span>单价(元)</span>
          <span>数量</span>
          <span>小计(元)</span>
        </div>
        <div class="shoopingBook">
         <div class="shoopingBookInfo" v-for="item in chooseBookList" :key="item.id">
           <span>{{item.name}}</span>
           <span>{{item.price}}</span>
           <span>{{buyNumber}}</span>
           <span>{{buyNumber*item.price}}</span>
           <!--<span><button class="deleteButton" @click="deleteValue(item.id)">删除</button></span>-->
         </div>
        </div>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'shoppingCar',
  data () {
    return {
      chooseBookList: []
    }
  },
  created () {
    this.getBookInfo()
  },
  methods: {
    getBookInfo () {
      this.axios.get('BookCrud/findAll').then(res => {
        let bookInfoList = res.data
        this.chooseBookList = bookInfoList.filter(x => x.id === this.chooseBookId)
        console.log(this.chooseBookList)
        this.$store.commit('setCarList', this.chooseBookList)
        console.log(this.carList)
      })
    }
    // deleteValue (id) {
    //   console.log(id)
    //   let i = this.carList.findIndex(x => x.id === id)
    //   this.carList.splice(i, 1)
    // }
  },
  computed: {
    ...mapState(['chooseBookId', 'carList', 'buyNumber'])
  }
}
</script>

<style scoped>
.shoppingBox{
  margin-left: 200px;
}
h1{
  font-size: 21px;
  color: #000000;
  font-weight: bold;
}
.shoppingTop{
  width: 750px;
  height: 45px;
  background-color: #F9F9F9;
  color: #3E3A39;
  font-size: 14px;
  line-height: 45px;
  display: flex;
}
.shoppingTop span {
  flex: 1;
  text-align: center;
}
.shoopingBook{
  width: 750px;
  height: 400px;
  /*background-color: dimgray;*/
}
.shoopingBookInfo{
  display: flex;
}
/*.deleteButton{*/
  /*height: 40px;*/
/*}*/
.shoopingBookInfo span{
  flex: 1;
  text-align: center;
  display: inline-block;
  height: 40px;
  line-height: 40px;
}
</style>
